body {
    font-family: Arial, sans-serif;
}

.steps-container {
    margin: 20px;
}

.steps {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    counter-reset: order;
    list-style: none;
}

.steps > li {
    flex: auto;
    display: inline-flex;
    align-items: center;
    counter-increment: order;
    color: #666;
}

.steps > li:last-child {
    flex: none;
}

.steps > li::before {
    content: counter(order);
    flex-shrink: 0;
    width: 1.4em;
    line-height: 1.4em;
    margin-right: .5em;
    text-align: center;
    border-radius: 50%;
    border: 1px solid;
}

.steps > li:not(:last-child)::after {
    content: '';
    flex: 1;
    margin: 0 1em;
    border-bottom: 1px solid;
    opacity: .6;
}

.steps > .active {
    color: #06e;
}

.steps > .active::before {
    color: #fff;
    background: #06e;
    border-color: #06e;
}

.steps > .active ~ li {
    color: #666;
}

.step-content-item {
    display: none; 
    
}

.step-content-item.active {
    display: block; 
}

.hidden {
    display: none;
}